<template>
    <div class="box">
        <el-container class="container">
            <el-header class="header">
                <div>后台管理系统</div>
                <div style="display:flex;">
                    <p style="margin-right:20px;color:#409eff">{{ username }}</p>
                    <div @click="loginout" style="cursor:pointer;">退出登录</div>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px" class="aside">
                    <el-menu :default-active="$route.path" router>
                        <el-menu-item index="/role">
                            <el-icon>
                                <setting />
                            </el-icon>
                            <span>角色管理</span>
                        </el-menu-item>
                        <el-menu-item index="/user">
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                            <span>用户管理</span>
                        </el-menu-item>

                        <el-sub-menu index="/menu">
                            <template #title><el-icon>
                                    <Menu />
                                </el-icon>菜单管理</template>
                            <el-menu-item index="/menu"> <el-icon>
                                    <Menu />
                                </el-icon>菜单管理</el-menu-item>
                            <el-menu-item index="/other"><el-icon>
                                    <Tools />
                                </el-icon>其他页面</el-menu-item>
                        </el-sub-menu>

                    </el-menu>
                </el-aside>
                <el-main>
                    <!-- <RouterView></RouterView> -->
                    <!-- <RouterView /> -->
                    <!-- <router-view /> -->

                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
export default {
    setup() {
        const username = localStorage.getItem('username')
        const router = useRouter()
        const loginout = () => {
            // 提示退出登录成功
            ElMessage({
                message: '退出登录成功',
                type: 'success',
            })
            // 清除token
            localStorage.removeItem('token')
            // 清除用户信息
            localStorage.removeItem('username')
            // 跳转到登录页面
            // 选项式API： this.$router.push('/')
            // 组合式API：https://router.vuejs.org/zh/guide/advanced/composition-api.html
            router.push('/login')
        }
        return {
            username,
            loginout
        }
    }
}
</script>
<style lang="scss">
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body,
#app,
.box {
    width: 100%;
    height: 100%;
}

.box {
    background: #efefef;

    .container {
        height: 100%;
    }

    .header {
        background: #fff;
        display: flex;
        justify-content: space-between;
        line-height: 60px;
    }

    .aside {
        background: #fff;
        height: 100%;
    }

}
</style>